#head {
    background-color: #f6f6f6;

    .headBox {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;

        .p1 {
            position: absolute;
            top: 40%;
            left: 30%;
            font-size: 35px;
            color: #fff;
            z-index: 100;
            font-weight: 500;
        }

        .p2 {
            position: absolute;
            top: 60%;
            left: 32%;
            font-size: 18px;
            color: #fff;
            z-index: 100;
        }

        .image {
            position: relative;

            .shadow {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(9, 9, 9, 0.6);
                z-index: 99;
            }


        }

    }
}

#content {
    .contentBox {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;

        .left {
            width: 21%;
            // height: 590px;
            display: flex;
            flex-direction: column;

            .up {
                width: 100%;
                padding: 8%;
                color: #fff;
                background-color: #095391;
                // margin-bottom: 5px;
                margin-top: 15px;

                h3 {
                    font-weight: 500;
                    font-size: 16px;
                    font-family: OSBold;
                    letter-spacing: 1px;
                }

                .txt {
                    margin-top: 20px;
                }

                .priceBox {
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    color: rgb(200, 200, 8);
                    font-weight: 500;
                }
            }

            .itemLeft {
                width: 100%;
                padding: 8%;
                color: #111;
                border-bottom: 1px solid #959292;
                background-color: #f6f6f6;

                h5 {
                    font-weight: 500;
                    font-size: 14px;
                    letter-spacing: 0.5px;
                }

                .priceBox {
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    color: red;
                    font-weight: 500;
                }
            }

            .itemLeft:last-child {
                margin-bottom: 2px;
            }

            .item {
                width: 100%;
                height: 250px;
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                margin-bottom: 5px;


                .image {
                    width: 100%;
                    height: auto;
                }

                .txt {
                    width: 95%;
                    font-size: 12px;
                    margin-top: 10px;
                    font-weight: 500;
                }

                .introduce {
                    font-size: 12px;
                    margin-top: 10px;
                    width: 100%;
                    text-align: left;
                }

                .down {
                    width: 95%;
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .price {
                        width: 60px;
                        font-size: 1.2rem;
                        color: red;
                        font-weight: 700;
                    }

                    button {
                        padding: 3px;
                        background-color: red;
                        color: #FFFFFF;
                        border-radius: 5px;
                        width: 80px;
                        border: unset;

                    }
                }


            }
        }

        .right {
            margin-left: 1%;
            width: 69.5%;
            display: flex;
            flex-direction: column;

            .top {
                width: 100%;

                .breadcrumb {
                    background-color: unset;
                    color: #605b5b;
                    width: 100%;
                    font-size: 16px;
                    margin-top: 10px;

                    a {
                        color: #323131;
                    }

                    >li+li:before {
                        color: #575454;
                        content: " | ";
                        padding: 0px 15px;
                    }

                    .active {
                        color: #b06b0a;
                        font-weight: 500;
                        border-bottom: 1px solid #b06b0a;
                    }
                }
            }

            .classList {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .item {
                    width: 31%;
                    height: 250px;
                    display: flex;
                    flex-direction: column;
                    margin-top: 25px;

                    .image {
                        width: 100%;
                        height: auto;
                    }

                    .txt {
                        width: 95%;
                        font-size: 12px;
                        margin-top: 10px;
                        font-weight: 500;
                    }

                    .introduce {
                        font-size: 13px;
                        margin-top: 10px;
                        width: 100%;
                        text-align: left;
                    }

                    .down {
                        width: 95%;
                        margin-top: 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            width: 60px;
                            font-size: 1.2rem;
                            color:red;
                            font-weight: 700;
                        }

                        button {
                            padding: 3px;
                            background-color:red;
                            color: #FFFFFF;
                            border-radius: 5px;
                            width: 80px;
                            border: unset;

                        }
                    }


                }
            }
        }
    }
}


@media screen and (max-width: 1920px) {
    // #content .contentBox {
    //     .left{
    //         .item{
    //             margin-bottom: unset;
    //             margin-top: 10px;
    //         }
    //     }
    //     .right{
    //         .top{
    //             margin-top: 10px;
    //         }
    //         .classList{
    //             .item{
    //                 margin-bottom: -8px;
    //                 margin-top: 20px;
    //             }
    //         }
    //     }
    // }
}
@media screen and (max-width: 1024px){}

@media screen and (max-width: 768px) {
    #head .headBox {
        .p1 {
            position: absolute;
            top: 30%;
            left: 10%;
            font-size: 25px;
            color: #fff;
            z-index: 100;
            font-weight: 500;

        }
        .p2{
            left: 11%;
            font-size: 14px;
        }
    }
    #content .contentBox {
        flex-direction: column;
        .left{
            width: 100%;
            .item{
                width: 100%;
                margin-bottom: 30px;
                text-align: center;
                .down{
                    flex-direction: column;
                }
                .introduce{
                    text-align: unset;
                }
            }
        }
        .right{
            width: 100%;
            .top{
                margin-top: 30px;
            }
            .classList{
                .item{
                    width: 100%;
                    margin-bottom: 50px;
                    text-align: center;

                    .down{
                        flex-direction: column;
                    }
                    .introduce{
                        text-align: unset;
                    }
                }
            }
        }
    }
}

